//Scripts for the time bar
var video;
var duration;
var sliderDiv;

function initVideos() {
	//set the video
	video = document.getElementById("video");

	//Set the size of the video
	video.width = getVideoWidth();
	video.height = getVideoHeight();
	//set the play/pause on click on the video
	$("#video").bind("click", playPause);

	//Wait for the metadata needed for the timebar to be loaded
	/*video.addEventListener("loadedmetadata", function(){
		alert("here");
		//set the duration and the progress bar
		duration = video.duration;
		//Set the progress bar
		initProgressBar();
	});*/
	//The slides are better above the video but the video HAS to be declared before, hence this trick
	$("#slides").insertBefore("#video");

	//set listener for resizing the video automatically
	window.onresize = function(){resizeVideos();};
	
	//Initialize the tooltips (this is in pins.js)
	initToolTips();
	
	//set the submit function for the add annotation form (this is in pins.js)
	initAddAnnotation();
}

function playPause() {
	slide = document.getElementById("currentSlide");
	if (video.paused) {
		video.play();
		if (slide.tagName == "VIDEO") {
			slide.play();
		}
	} else {
		video.pause();
		if (slide.tagName == "VIDEO") {
			slide.pause();
		}

	}
}

function getVideoWidth() {
	var regularWidth =  (getVideoHeight() / 10) * 16;
	if($(window).width()< regularWidth ){
		return $(window).width();
	}else{
		return regularWidth;
	}
}

function getVideoHeight() {
	//all the stuff that need their own space appart from the video & slides
	var buttons =$("#videoButtons").height();
	var pinsAnnot = $("#pinsAnnot").height();
	var pinsSlides = $("#pinsSlides").height();
	var timeBar = $("#timeBar").height();
	var topMargin = parseInt($('body').css('margin-top').slice(0,-2));
	var bottomMargin =  parseInt($('body').css('margin-bottom').slice(0,-2));
	
	//Sum all the height not to take in account for the computation
	var toMinus = buttons + pinsAnnot + pinsSlides + timeBar + topMargin + bottomMargin;
	return Math.floor(($(window).height() - toMinus) / 2);
}

function switchVideos() {
	slide = document.getElementById("currentSlide");
	//get the state of the video
	var paused = video.paused;
	var slideh = slide.height;
	var slidew = slide.width;
	var videoh = video.height;
	var videow = video.width;
	//check if the video is under the slide
	if ($("#video").offset().top > $("#slides").offset().top) {
		video.width = slidew;
		video.height = slideh;
		slide.width = videow;
		slide.height = videoh;

		//But the small video above
		$("#video").insertBefore("#slides");
		if (!paused) {
			video.play();
			if (slide.tagName == "VIDEO") {
				slide.play();
			}
		}
	} else {
		video.width = slidew;
		video.height = slideh;
		slide.width = videow;
		slide.height = videoh;
		//But the small slide above
		$("#slides").insertBefore("#video");
		//The switch pauses the video, so if the video was playing make it play
		if (!paused) {
			video.play();
			if (slide.tagName == "VIDEO") {
				slide.play();
			}
		}
	}
}

function initProgressBar() {
	sliderDiv = $("#slider");
	var duration = document.getElementById("video").duration;
	sliderDiv.slider({
		value : 0,
		orientation : "horizontal",
		range : "min",
		min : 0,
		max : duration,
		slide : updateVideoTime,
		stop : updateVideoTime
	});
	
	//Bind the time update and the progress bar
	$("#video").bind("timeupdate", updateProgressBar);
}

function updateProgressBar() {
	var current = document.getElementById("video").currentTime;

	sliderDiv.slider("option", "value", current);
	//Opens the good annotation (this function is in pins.js)
	spawnAnnotation();
	//Update the visual timer
	videoTime();
}

function updateVideoTime(event, ui) {
	var current = ui.value;
	video.currentTime = current;

	//if the slide is a video update time too
	slide = document.getElementById("currentSlide");
	if (slide.tagName == "VIDEO") {
		slide.currentTime = ui.value - slide.dataset.start;
	}
}

function videoTime(){
	var timeDiv = $("#videoTime");
	var currentTime = document.getElementById("video").currentTime;
	var duration = document.getElementById("video").duration;
	var min = Math.floor(currentTime/60);
	var sec =  Math.floor(currentTime%60);
	var minTot = Math.floor(duration/60);
	var secTot = Math.floor(duration%60);
	
	var stringTime = ('0'+min).slice(-2)+":"+('0'+sec).slice(-2)+"/"+('0'+minTot).slice(-2)+":"+('0'+secTot).slice(-2);
	timeDiv.html(stringTime);
}

function resizeVideos() {

	var top;
	var bottom;
	if ($("#video").offset().top > $("#slides").offset().top) {

		top = document.getElementById("currentSlide");
		bottom = document.getElementById("video");
	}else{

		top = document.getElementById("video");
		bottom = document.getElementById("currentSlide");
	}
	
	var newWidth = getVideoWidth();
	var newHeight = getVideoHeight();
	//if the height reduced
	if(bottom.height > newHeight){
		//only reduce the top one up to 360x225
		if(newHeight>225){
		top.height = newHeight;
		top.width = newWidth;
		}else{
			top.height = 225;
			top.width = 360;
		}
	}else{
		//if the height grew, grow both
		top.height = newHeight;
		top.width = newWidth;
		bottom.height = newHeight;
		bottom.width = newWidth;
	}
	
}
